<template>
  <view class="search-input-com-page">
    <view class="search-wrap" :style="state.searchBoxStyle">
      <view
        v-if="props.showBack"
        class="iconfont icon-back"
        @click.stop="proxy.$utils.goBack()"
      ></view>
      <view class="search-box" :style="state.inputStyle">
        <view class="iconfont icon-search"></view>
        <input
          class="txt"
          type="text"
          v-model="state.content"
          :placeholder="props.txt"
          confirm-type="search"
          @confirm="confirm"
          @input="input"
        />
      </view>
    </view>

    <view
      class="history-wrap"
      v-if="state.history.length > 0 && !state.content"
    >
      <view class="title-box">
        <view class="title">历史搜索</view>
        <view class="iconfont icon-delete" @click="delHistory"></view>
      </view>
      <view class="history-list">
        <view
          class="history-box"
          v-for="(item, index) in state.history"
          :key="index"
          @click="chSearch(item, index)"
          >{{ item }}</view
        >
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import { reactive, getCurrentInstance, onMounted, nextTick } from "vue";
const { proxy } = getCurrentInstance();
/**
 * 接口
 */
/**
 * 父组件数据
 */
const props = defineProps({
  // 是否显示返回键
  showBack: {
    type: Boolean,
    default: false,
  },
  // 边框颜色
  inputBgColor: {
    type: String,
    default: "#eee",
  },
  // 搜索提示文字
  txt: {
    type: String,
    default: "请输入搜索内容",
  },
});
/**
 * 数据
 */
const state = reactive({
  searchBoxStyle: {},
  inputStyle: {},
  content: "",
  history: uni.getStorageSync("searchHistory"),
});
/**
 * 初始方法
 */
onMounted(() => {
  handleStyle();
});
/**
 * 功能方法
 */
const handleStyle = () => {
  const systemMenuBtn = proxy.$config.systemMenuBtn();
  const systemInfo = proxy.$config.systemInfo();
  const backWidth = props.showBack ? proxy.$utils.rpx2px(50) : 0;
  nextTick(() => {
    state.searchBoxStyle = {
      // #ifdef MP-WEIXIN
      height: `${systemMenuBtn.height}px`,
      // #endif
    };
    state.inputStyle = {
      // #ifdef MP-WEIXIN
      width: `calc(100vw - ${
        systemMenuBtn.width +
        (systemInfo.screenWidth - systemMenuBtn.right) +
        proxy.$utils.rpx2px(60) +
        backWidth
      }px )`,
      // #endif
      background: props.inputBgColor,
    };
  });
};
const confirm = (e: any) => {
  let searchHistory = uni.getStorageSync("searchHistory") || [];
  let result = searchHistory.filter((ele: any) => ele != e.detail.value);
  result.unshift(e.detail.value);
  uni.setStorageSync("searchHistory", result.slice(0, 10));
  state.history = uni.getStorageSync("searchHistory");
  emit("search", e.detail.value);
};
const input = (e: any) => {
  if (!e.detail.value) {
    emit("search", "");
  }
};
const chSearch = (content: any, index: any) => {
  state.content = content;
  state.history.splice(index, 1);
  state.history.unshift(content);
  uni.setStorageSync("cookSearchHistory", state.history);
};
const delHistory = () => {
  uni.removeStorageSync("searchHistory");
  state.history = [];
};
/**
 * 父组件方法
 * const emit = defineEmits(['function']);
 * emit('function', state);
 */
const emit = defineEmits(["search"]);
/**
 * 父组件传递生命周期方法
 * onShareAppMessage  分享好友
 * onShareTimeline 分享朋友圈
 * onReachBottom 页面内触底
 */
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.search-input-com-page {
  .search-wrap {
    display: flex;
    width: 100%;
    align-items: center;
    .icon-back {
      height: 60rpx;
      margin-left: 30rpx;
      display: flex;
      font-size: 34rpx;
      justify-content: center;
      align-items: center;
    }
    .search-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 60rpx;
      margin: 30rpx;
      box-sizing: border-box;
      border-radius: 100rpx;
      .icon-search {
        font-size: 26rpx;
        margin-left: 30rpx;
        color: var(--gray-color);
      }
      .txt {
        font-size: 26rpx;
        margin-left: 19rpx;
        color: var(--gray-color);
      }
    }
    // #ifdef MP-WEIXIN
    .search-box {
      margin: 0 30rpx;
    }
    // #endif
  }
  .history-wrap {
    margin: 45rpx 30rpx 0;
    .title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #151212;
      }
      .icon-delete {
        padding: 20rpx;
        color: #555;
        font-size: 26rpx;
      }
    }
    .history-list {
      margin-top: 38rpx;
      display: flex;
      flex-wrap: wrap;
      .history-box {
        padding: 0 16rpx;
        margin-right: 20rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        background: #f6f6f6;
        border-radius: 33rpx;
        margin-bottom: 22rpx;
      }
    }
  }
}
</style>
